<template>
  <div>
    <div class="list_header">
      <span> 示范区管理 </span>
      <img src="@/assets/images/icon_add.png" @click="addArea" />
      <img src="@/assets/images/icon_refresh.png" @click="getAreaList" />
    </div>
    <a-spin :spinning="spinning">
      <ul class="list_main">
        <li v-for="item in areaList" :key="item.id" :class="['list_item', { checked: checkedAreaId == item.id }]" @click="checkArea(item.id)">
          <span>{{ item.demonstrationName }}</span>
          <img src="@/assets/images/icon_edit.png" @click="updateArea(item)" />
          <img src="@/assets/images/icon_delete.png" @click="deleteArea(item.id)" />
        </li>
      </ul>
    </a-spin>
    <AreaForm ref="refAreaForm" @confirm="onConfirm" />
  </div>
</template>
<script setup>
import {ref, onMounted, defineEmits} from 'vue';
import { message } from 'ant-design-vue';
import {getAreaByAll, delAreaByID} from '@/api/area/handleData.js';
import AreaForm from './AreaForm.vue';
const emit = defineEmits(['change']);
const spinning = ref(true);
const checkedAreaId = ref(undefined);
const areaList = ref([]);
const refAreaForm = ref();
const isAdd = ref(true);
/** 点击示范区 */
const checkArea = (id) =>{
  if(id == checkedAreaId) return;
  checkedAreaId.value = id;
  emit('change', checkedAreaId.value);
}

/** 请求示范区列表 */
const getAreaList = () =>{
  spinning.value = true;
  getAreaByAll().then(({data, resCode}) =>{
    if(resCode === '00000'){
      areaList.value = data;
      if(areaList.value.length > 0 && !checkedAreaId.value){
        checkedAreaId.value = areaList.value[0].id;
        emit('change', checkedAreaId.value);
      }
    }else{
      areaList.value = [];
    }
    spinning.value = false;
  })
}

const deleteArea = (id) =>{
  delAreaByID(id).then(({resMsg})=>{
    message.success(resMsg);
    checkedAreaId.value = undefined;
    getAreaList();
  })
}

getAreaList();

const addArea = () =>{
  refAreaForm.value.show(true)
}

const updateArea = (item) =>{
  refAreaForm.value.show(false, item);
}

const onConfirm = ()=>{
  getAreaList();
}
</script>
<style lang="less" scoped>
.list_header {
  display: flex;
  height: 44px;
  align-items: flex-end;
  justify-content: flex-start;
  font-size: 14px;
}
.list_header > img {
  margin-left: 10px;
  margin-bottom: 2px;
  cursor: pointer;
}
.list_main {
  width: 100%;
  list-style: none;
  padding: 0 16px 12px 16px;
  max-height: calc(100% - 44px);
  overflow-y: auto;
}
.list_item {
  display: flex;
  margin-top: 6px;
  height: 40px;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  gap: 10px;
  cursor: pointer;
}
.list_item:hover {
  color: #2071f5;
}
.list_item.checked {
  color: #2071f5;
}
.list_item > span {
  width: 100%;
  text-align: start;
}
.list_item > img {
  cursor: pointer;
}
</style>
